<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2</title>
    <style>
        div{
            border: solid 1px black;
            float: left;
            background-color: beige;
        }
        #ml{
            width: 30%;
            height: 36rem;
        }
        #mr{
            width: 69.3%;
            height: 36rem;
        }
        #mid{
            width: 50%;
            height: 36rem;
        }
        #footer,#header{
            height: 3rem;
            width: 50%;
        }
        .ml3{
            width:100% ;
            height: 12rem;
        }
        #mru{
            width: 100%;
            height: 18rem;
        }
        #mrd{
            width: 100%;
            height: 18.1rem;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div id="mid">
<div id="ml">
    <div class="ml3">ml_up</div>
    <div class="ml3">ml_mid</div>
    <div class="ml3" id="mld">ml_down</div>
</div>
<div id="mr">
    <div id="mru">mr_up</div>
    <div id="mrd">mr_down</div>
</div>
</div>
<div id=footer>footer</div>
</body>
</html>